<template>
  <div class="top" :class="{ active: !isIndex }">
    <div class="header flex flex-center flex-between">
      <div class="cq-logo">
        <h1>
          <!-- <a href="#"><img :src="src" width="92" height="36" alt="logo-rev"></a> -->
          <img
            :src="isIndex ? home : other"
            width="92"
            height="36"
            alt="logo-rev"
          />
        </h1>
      </div>

      <div class="nav">
        <ul class="flex flex-center">
          <li
            :key="item.name"
            v-for="item in navList"
            :class="{ up: item.children && item.children.length }"
          >
            <router-link :to="item.url" :class="{ headerColor: !isIndex }">{{
              item.name
            }}</router-link>

            <div v-if="item.children && item.children.length">
              <ul class="pull-down flex flex-center column">
                <li v-for="son in item.children" :key="son.name">
                  <a href="#" class="subnav">{{ son.name }}</a>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "OrangeHead",
  props: {
    isIndex: {
      type: Boolean,
      // default: false,
    },
  },
  data() {
    return {
      home: require("../assets/img/logo-rev.png"),
      other: require("@/assets/img/logo2.png"),
      navList: [
        {
          url: "/home",
          name: "首页",
        },
        {
          url: "#",
          name: "橙品牌",
          children: [
            {
              url: "#",
              name: "橙权益",
            },
            {
              url: "#",
              name: "橙金融",
            },
          ],
        },
        {
          url: "/news",
          name: "橙权益",
        },
        {
          url: "/case",
          name: "行业案例",
        },
        {
          url: "/join",
          name: "加入我们",
        },
        {
          url: "/about",
          name: "关于我们",
        },
      ],
    };
  },
  created() {
    this.get();
  },
  methods: {
    get() {
      console.log(this.isIndex);
    },
  },
};
</script>

<style lang="scss" scoped>
a {
  text-decoration: none;
  color: #c8c8c8;
}

.flex {
  display: flex;
}

.column {
  flex-direction: column;
}

.flex-center {
  justify-content: center;
  align-items: center;
}
.flex-between {
  justify-content: space-between;
}

.top {
  height: 80px;
  width: 100%;
  position: fixed;
  z-index: 99;
}

.header {
  justify-content: space-between;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 1110px;
}

.headerColor {
  color: #999;
}

.active {
  background-color: #fff;
}

.nav ul {
  font-size: 16px;
  color: #c8c8c8;
}
.nav ul li {
  list-style-type: none;
}

.nav a {
  margin-right: 55px;
}

.nav a:hover {
  color: #ff7200;
}

.up {
  position: relative;
}

.up::after {
  content: "\e6b9";
  font-family: "icomoon";
  position: absolute;
  top: 0;
  left: 50px;
  transition: 0.3s;
}

.up:hover::after {
  transform: rotate(180deg);
}

.pull-down {
  position: absolute;
  left: -20px;
  top: 50px;
  visibility: hidden;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.5);
  transition: 0.5s linear;
  border-radius: 6px;
  font-size: 14px;
  color: #fff;
  width: 100px;
}

.pull-down li {
  font-size: 14px;
  padding: 10px 0;
}

.up:hover .pull-down {
  visibility: visible;
}

ul li .subnav:hover {
  color: #ff7200;
}
</style>
